<template>
  <page-layout class="department">
    <div class="search-wrapper">
      <div>
        <a-input
          placeholder="部门名称"
          class="search-input"
          v-model="searchText"
        >
          <a-icon
            slot="prefix"
            type="search"
            style="font-size: 28px; color: #999"
          />
        </a-input>
        <a-button type="primary" class="search-button" @click="handelsearch"
          >搜索</a-button
        >
      </div>
      <a-button
        style="width: 120px; height: 54px"
        type="primary"
        @click="() => showForm()"
      >
        新增
      </a-button>
    </div>

    <!-- <a-card> -->
    <div class="tabel-wrapper">
      <!-- <div class="operator">
          <a-button @click="addNew" type="primary">新建</a-button>
          <a-button>批量操作</a-button>
          <a-dropdown>
            <a-menu @click="handleMenuClick" slot="overlay">
              <a-menu-item key="delete">删除</a-menu-item>
              <a-menu-item key="audit">审批</a-menu-item>
            </a-menu>
            <a-button> 更多操作 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </div> -->
      <standard-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        size="large"
        :loading="loading"
      >
        <!-- eslint-disable-next-line -->
        <div slot="action" slot-scope="{ text, record }">
          <a @click="showForm(record)"> 编辑 | </a>
          <!-- {{ record }} -->
          <a-popconfirm
            title="确定删除此部门吗?"
            ok-text="是的"
            cancel-text="取消"
            @confirm="() => confirm(record.key)"
          >
            <a>删除</a>
          </a-popconfirm>
        </div>
        <!-- <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template> -->
      </standard-table>
    </div>
    <a-modal v-model="visible" :title="title" :afterClose="handleCancel">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="submitLoading"
          @click="handelSubmit"
        >
          提交
        </a-button>
      </template>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="部门名称" required>
          <a-input
            placeholder="请输入部门名称"
            v-decorator="[
              'name',
              {
                initialValue: formData.name,
                rules: [{ required: true, message: '请输入部门名称!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <!-- {{ formData }} -->
        <a-form-item label="父级部门">
          <a-select
            placeholder="请选择父级部门"
            v-decorator="[
              'pid',
              {
                initialValue: formData.pid,
                rules: [{ required: true, message: '请选择父级部门!' }]
              }
            ]"
          >
            <a-select-opt-group>
              <!-- <div slot="label">
                <a-input @keyup.enter="enterSearch">
                  <a-icon slot="prefix" type="search" />
                </a-input>
              </div>
              <a-select-option disabled class="search-disabled" value="text">
                可以通过搜索来筛选
              </a-select-option> -->
            </a-select-opt-group>
            <a-select-option :value="0"> 此部门为顶级部门 </a-select-option>
            <a-select-option
              v-for="item in dataSource"
              :key="item.key"
              :value="item.key"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="权重" required>
          <a-input-number
            :min="0"
            v-decorator="[
              'weight',
              {
                initialValue: formData.weight,
                rules: [{ required: true, message: '请输入权重!' }]
              }
            ]"
          ></a-input-number>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- </a-card> -->
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import StandardTable from "@/components/table/StandardTable";
import { getDepartments, deleteItem, add, edit } from "@/services/department";
// import { mapMutations } from "vuex";
const columns = [
  {
    title: "部门名称",
    dataIndex: "name"
  },
  {
    title: "创建时间",
    dataIndex: "created_at"
  },
  {
    title: "更新时间",
    dataIndex: "updated_at"
  },
  {
    title: "更多",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];

export default {
  name: "department",
  components: { PageLayout, StandardTable },
  data() {
    this.form = this.$form.createForm(this);
    return {
      title: "", // 弹出框的标题
      visible: false, // 弹出框的显示和隐藏
      submitLoading: false, // 弹出框的提交时的 loading
      formData: {}, // 正在编辑的项的列表
      searchText: "", // 搜索的值
      loading: true, // table 的 loading 效果的显示和隐藏
      columns: columns, // 表格列的配置描述
      dataSource: [], // 表格数据数组
      pagination: {
        // 分页的配置
        size: "small",
        showSizeChanger: true,
        showQuickJumper: true,
        poposition: "bottom",
        pageSize: 5,
        value: ""
      }
    };
  },
  created() {
    this.loadTableData();
  },
  methods: {
    enterSearch(e) {
      console.log(e, "search");
    },
    // 请求table 的数据
    // obj 请求的字段
    loadTableData(obj) {
      this.loading = true;
      getDepartments(obj).then((res) => {
        console.log(res.data, 222222);
        // 关闭loading
        this.loading = false;
        if (res.data.code === 20000) {
          // 把获取到的数据转换成树形格式
          this.dataSource = res.data.data.data.map((item) => {
            console.log(item.name, item.created_at);
            let {
              department_id,
              name,
              weight,
              children,
              created_at,
              updated_at,
              pid
            } = item;
            if (children.length <= 0) {
              return {
                key: department_id,
                pid,
                name: name || "未知",
                weight: weight || 0,
                created_at: created_at || "暂无",
                updated_at: updated_at || "暂无"
              };
            } else {
              children = children.map((item) => {
                const {
                  department_id,
                  pid,
                  created_at,
                  updated_at,
                  name,
                  weight
                } = item;
                return {
                  key: department_id,
                  pid,
                  name: name || "未知",
                  weight: weight || 0,
                  created_at: created_at || "暂无",
                  updated_at: updated_at || "暂无"
                };
              });
              return {
                key: department_id,
                name: name || "未知",
                weight: weight || 0,
                children,
                pid,
                created_at: created_at || "暂无",
                updated_at: updated_at || "暂无"
              };
            }
          });
        }
      });
    },
    handelsearch() {
      this.loadTableData({ name: this.searchText });
      this.searchText = "";
    },
    confirm(key) {
      // 发起删除的请求
      deleteItem(key).then((res) => {
        // console.log(res, "delete");
        // 成功
        if (res.data.code === 20000) {
          // 提示信息
          this.$message.success({
            content: res.data.message || "删除成功~"
          });
          // 删除成功后重新获取数据
          this.loadTableData();
        } else {
          this.$message.error(res.data.message || "删除失败！");
        }
      });
      // this.$message.info(`点击了确定,行数为${key + 1}行`);
      // this.deleteRecord(key);
    },
    showForm(record) {
      console.log(record);
      if (record) this.title = "修改部门信息";
      else this.title = "新增部门信息";

      this.visible = true;
      this.formData = record ? record : {};
      // this.form.setFieldsValue({
      //   // department_id: record.key,
      //   title: record.name,
      //   pid: record.pid,
      //   weight: record.weight
      // });
    },
    // 查看介绍详情关闭
    handleCancel() {
      console.log("关闭");
      this.visible = false;
      this.title = "";
      this.formData = {};
      this.form.resetFields();
      this.submitLoading = false;
    },
    handelSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submitLoading = true;
          if (!this.formData.key) {
            add(values)
              .then((res) => {
                if (res.data.code === 20000) {
                  this.submitLoading = false;
                  this.loadTableData();
                  this.$message.success({
                    content: res.data.message || "提交成功~",
                    duration: 0.4,
                    onClose: () => {
                      this.form.resetFields();
                      this.visible = false;
                    }
                  });
                } else {
                  this.submitLoading = false;
                }
              })
              // eslint-disable-next-line no-unused-vars
              .catch((err) => {
                this.submitLoading = false;
              });
          } else {
            edit({ ...values, department_id: this.formData.key })
              .then((res) => {
                if (res.data.code === 20000) {
                  this.submitLoading = false;
                  this.loadTableData();
                  this.$message.success({
                    content: res.data.message || "提交成功~",
                    duration: 0.4,
                    onClose: () => {
                      this.form.resetFields();
                      this.visible = false;
                    }
                  });
                } else {
                  this.submitLoading = false;
                }
              })
              // eslint-disable-next-line no-unused-vars
              .catch((err) => {
                this.submitLoading = false;
              });
          }
        }
      });
    }
  }
};
</script>

<style lang="less">
.search-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  > div {
    .search-input input {
      padding-left: 45px !important;
    }
    display: flex;
    width: 60%;
    .ant-input-affix-wrapper {
      display: inline-block;
      width: calc(100% - 150px);
      height: 54px !important;
      input {
        height: 100% !important;
      }
      input::-webkit-input-placeholder {
        color: #9999;
        font-size: 16px;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #9999;
        font-size: 16px;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #9999;
        font-size: 16px;

        font-size: 17px;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #9999;
        font-size: 16px;
      }
    }
    .search-button {
      margin-left: 30px;
      width: 120px;
      height: 54px;
    }
  }
}
.department {
  .tabel-wrapper {
    border-radius: 5px;
    // .introduce {
    //   display: inline-block;
    //   width: 120px;
    //   overflow: hidden;
    //   white-space: nowrap;
    //   text-overflow: ellipsis;
    //   // text-align: center;
    // }
    // min-height: 450px;
    background-color: #fff;
    color: #1f1f1f;
    .ant-pagination {
      margin-top: 60px !important;
    }
    // tr {
    //   // height: 66px !important;
    //   // padding-left: 10px;
    // }
    .ant-table-thead {
      padding-left: 20px;
      background: #effaff;
      & > tr > th {
        background: #effaff !important;
      }
    }
    .ant-table-tbody {
      padding-left: 20px;
    }
    .ant-table-pagination.ant-pagination {
      float: unset !important;
      text-align: center;
    }
  }
}
</style>
